import { Button, Col, Divider, Row, Table, message } from "antd"
import { CustomIcon, Title } from "../../components"
import styles from './index.module.less'
import { useEffect, useState } from "react"
import { PushpinTwoTone } from "@ant-design/icons"
import { useTheme } from "../../hooks/useTheme"

const Warehouse = () => {
    const [isTrueWarehouse, setIsTrueWarehouse] = useState(true)
    const [dataSource, setDataSource] = useState<any[]>([{ name: 123 }, { name: 123 }, { name: 123 }, { name: 123 }, { name: 123 }, { name: 123 }])
    const [loading, setLoading] = useState(false);
    const { theme } = useTheme()
    useEffect(() => { loadMoreData() }, [])
    const columns = [
        {
            title: '名称',
            dataIndex: 'name',
            key: 'name',
            width: '40%',
            render: (text: number) => <div onClick={() => {alert(123)}}>123</div>,
        },
        {
            title: '简介',
            dataIndex: 'gender',
            key: 'gender',
            width: '20%'
        },
        {
            title: '更新时间',
            dataIndex: 'name',
            key: 'name',
            width: '30%',
            sorter: (a: { name: string | any[] }, b: { name: string | any[] }) => a.name.length - b.name.length,
        },
        {
            title: '操作',
            dataIndex: 'email',
            key: 'email',
            render: (text: number) => <>
                
                <Button type='text' icon={<PushpinTwoTone twoToneColor={iconColorChange(text)} />} />
                <span style={{color: 'var(--explanatory-color)'}}>｜</span>
                <Button type='text' icon={<CustomIcon style={{ fontSize: 18 }} str={'more-line'} />} />
            </>,
        },
    ]
    const iconColorChange = (WhetherTobookmark: number) => {
        if (theme === 'light') {
            return WhetherTobookmark ? "#000" : 'fff'
        } else {
            return WhetherTobookmark ? "#fff" : '#7e7c7c'
        }
    }
    const loadMoreData = () => {
        if (loading) {
            return;
        }
        setLoading(true);
        fetch('https://randomuser.me/api/?results=20&inc=name,gender,email,nat,picture&noinfo')
            .then((res) => res.json())
            .then((body) => {
                setDataSource([...dataSource, ...body.results]);
                setLoading(false);
            })
            .catch(() => {
                setLoading(false);
            });
    };
    return <div style={{ background: 'var(--bg-space-color)' }}>
        <div className={styles.warehouseBox}>
            <div>
                <Title title='仓库' level={4} />
                <div className={styles.commonWarehousesBox}>
                    <div className={styles.commonWarehousesTitleBox}>
                        <div>常用仓库</div>
                        <Button type='text' onClick={() => { setIsTrueWarehouse(!isTrueWarehouse) }}>{isTrueWarehouse ? '收起' : '展开'}</Button>
                    </div>
                    {isTrueWarehouse && <div className={styles.commonWarehousesList}>
                        <div className={styles.commonWarehousesItem}>
                            <div className={styles.commonWarehousesContent}>
                                <div>123123123123</div>
                                <Button type='text' icon={<CustomIcon style={{ fontSize: 18 }} str={'more-line'} />} />
                            </div>
                        </div>
                        <div className={styles.commonWarehousesItem}>
                            <div className={styles.commonWarehousesContent}>
                                123123123123
                            </div>
                        </div>
                        <div className={styles.commonWarehousesItem}>
                            <div className={styles.commonWarehousesContent}>
                                123123123123
                            </div>
                        </div>
                        <div className={styles.commonWarehousesItem}>
                            <div className={styles.commonWarehousesContent}>
                                123123123123
                            </div>
                        </div>
                    </div>}
                </div>
            </div>
            <div className={styles.contentBox}>
                <Table loading={loading}
                    pagination={false} size='middle'
                    dataSource={dataSource}
                    columns={columns} />
                加载更多
            </div>
        </div>
    </div>
}

export default Warehouse
